
import { useEffect, useState } from 'react'

const Verification = (props) => {
    const [strNum, setstrNum] = useState(props.name);
    const toParent = () => {
        // 调用props上面的getChildData方法
        props.getChildData && props.getChildData(strNum);
    };
    const captcha = (codeF) => {
        // 基本参数配置
        let h = 40 // canvas 画布的高
        let w = 100 // canvas 画布的宽
        let lineLen = 3 // 干扰线的数量
        let dotLen = 20 // 干扰小圆点的数量
        let el = '#canvas'  // dom的id
        let isLine = true  // 是否添加干扰线
        let isDot = true    // 是否添加干扰小圆点
        let result = '' // 验证码
        let isClick = true
        // const temp = option.data || 'abcdefghijklmnopqrstuvwxyz0123456789'.toUpperCase(); // 取值范围

        // 生成随机数
        function rn(min, max) {
            return Math.floor(Math.random() * (max - min) + min)
        }
        // 随机生成颜色
        function rc(min, max) {
            return `rgb(${rn(min, max)},${rn(min, max)},${rn(min, max)})`
        }
        function randomNum() {
            let a = 'abcdefghijklmnopqrstuvwxyz1234567890';
            let b = a.split('');
            let str = '';
            for (let i = 0; i < 4; i++) {
                str += b[Math.ceil(Math.random() * b.length - 1)]
            }
            return str;
        }
        //  获取画布的dom
        // debugger
        const canvas = document.querySelector(el)
        canvas.width = w
        canvas.height = h
        const ctx = canvas.getContext('2d')

        // 在canvas上绘制背景颜色
        ctx.fillStyle = rc(180, 230)
        ctx.fillRect(0, 0, w, h)
        // 随机字符串
        let str = codeF ? codeF : randomNum();
        setstrNum(str);
        // console.log(str);
        // 设置字体大小及字体
        ctx.font = 30 + 'px Simhei'
        // 设置文字基线
        ctx.textBaseline = 'top'
        // 填充字体的颜色
        ctx.fillStyle = rc(20, 150)
        ctx.save()
        // 设置字体的位移
        ctx.translate(28, 12)
        // 设置字体旋转
        ctx.fillText(str, -10, -10)
        // 每循环一次恢复位置
        ctx.restore();
        result = str;
        // 随机生成干扰线
        function line() {
            for (let i = 0; i < lineLen; i++) {
                ctx.beginPath()
                ctx.moveTo(rn(0, w), rn(0, h))
                ctx.lineTo(rn(0, w), rn(0, h))
                ctx.strokeStyle = rc(120, 230)
                ctx.closePath()
                ctx.stroke()
            }
        }
        line && line()
        // 随机生成干扰小圆点
        function dot() {
            while (dotLen) {
                ctx.beginPath()
                ctx.arc(rn(0, w), rn(0, h), 1, 0, 2 * Math.PI)
                ctx.closePath()
                ctx.fillStyle = rc(150, 200)
                ctx.fill()
                dotLen--
            }
        }
        dot && dot()
        // 点击事件
        isClick && (canvas.onclick = () => {
            captcha();
        })
    }
    useEffect(() => {
        const codeF = props.name;
        captcha(codeF,)
    }, [])
    return (
        <canvas id='canvas' onClick={toParent} style={{ marginLeft: '15px', borderRadius: '5px' }}></canvas>
    )
}


export default Verification